window.onload = function () {

 var socket = io('http://localhost:3000/')
 //var socket = io('http://192.168.125.58:3000/')
  var au = document.querySelector('#au')
  var login = document.querySelector('.login')
  var speak = document.querySelector('.speak')
  var left = speak.querySelector('.left')
  var right = speak.querySelector('.right')
  var username = login.querySelector('input')
  var header = login.querySelectorAll('li')
  var enter = login.querySelector('button')
  var ul = right.querySelector('ul')
  var uls = left.querySelector('ul')
  var h4 = right.querySelector('h4')
  var span = h4.querySelector('span')
  var text = speak.querySelector('textarea')
  var send = speak.querySelector('button')
  var usernameM
  var imgM

  var me = left.querySelector('div')
  enter.addEventListener('click', function () {
    if (username.value == '') {
      alert('你还未输入用户名！')
    }
    else {
      for (i = 0; i < header.length; i++) {
        if (header[i].index == 1) {
          var img = header[i].firstChild.src
        }
      }
      usernameM = username.value
      imgM = img
      socket.emit('login', { username: username.value, img: img })
      socket.on('loginError', data => {
        alert(data.msg)
      })
      socket.on('loginSuccess', data => {
        me.innerHTML = '<img src="' + img + '" alt=""><span>' + data.username + '</span>'
        login.style.display = 'none'
        speak.style.display = 'block'
      })
    }
  })
  socket.on('addUser', data => {
    let li = document.createElement('li')
    li.className = 'a'
    li.innerHTML = data.username + '加入了聊天室'
    ul.insertBefore(li, ul.children[0])
  })
  socket.on('userList', users => {
    uls.innerHTML = ''
    users.forEach(item => {
      let li = document.createElement('li')
      li.className = ''
      li.innerHTML = '<img src="' + item.img + '" alt=""><span>' + item.username + '</span>'
      uls.appendChild(li)
    })
    let i = users.length
    span.innerHTML = '(' + i + ')'
  })
  socket.on('delUser', data => {
    let li = document.createElement('li')
    li.className = 'a'
    li.innerHTML = data.username + '离开了聊天室'
    ul.insertBefore(li, ul.children[0])
  })
  send.addEventListener('click', function () {
    var context = text.value
    text.value = ''
    if (!context) return alert('请输入内容！')
    socket.emit('sendMessage', {
      msg: context,
      username: usernameM,
      img: imgM
    })
  })

  socket.on('receiveMessage', data => {
    if (data.username === usernameM) {
      let li = document.createElement('li')
      li.className = 'c'
      li.innerHTML = '<img src="' + data.img + '" alt=""><span>' + data.username + '</span><p>' + data.msg + '</p><li class="d"></li>'
      ul.appendChild(li)
    }
    else {
      let li = document.createElement('li')
      li.className = 'b'
      li.innerHTML = '<img src="' + data.img + '" alt=""><span>' + data.username + '</span><p>' + data.msg + '</p><li class="d"></li>'
      ul.appendChild(li)
      au.play()
    }
    ul.scrollTop = ul.scrollHeight
  })

  header[0].style.border = '1px #002fff solid'
  header[0].index = 1
  for (let i = 0; i < header.length; i++) {
    header[i].onclick = function () {
      for (i = 0; i < header.length; i++) {
        header[i].style.border = '1px #ffffff solid'
        header[i].index = 0
      }
      this.style.border = '1px #002fff solid'
      this.index = 1
    }
  }
}